<template>
  <div class="onlineAuth">
    <div class="topBg">
      <div class="mnClickDiv" @click="mnClickDiv()"></div>
      <van-nav-bar @click-left="onClickLeft" title="线上鉴权" left-arrow />
    </div>
    <div class="content">
      <div class="formQuery" v-if="!personListShow3">
        <van-form>
          <van-field v-model="formModel.name" name="成员名" label="成员名" placeholder="请输入成员名" />
          <van-field v-model="formModel.no" name="工号" label="工号" placeholder="请输入工号" />
          <van-field v-model="formModel.status" name="状态" label="状态" placeholder="请选择状态">
            <template #button>
              <van-icon name="arrow" />
            </template>
          </van-field>
          <van-field v-model="formModel.validityPeriod" name="有效期" label="有效期" placeholder="请选择有效期">
            <template #button>
              <van-icon name="arrow" />
            </template>
          </van-field>
          <van-field v-model="formModel.phone" maxlength="11" name="手机号" label="手机号" placeholder="请输入手机号" />
          <div style="margin: 16px;" class="btns">
            <van-button round block type="default" @click="resetForm">重置</van-button>
            <van-button round block type="info" @click="searchQuery">查询</van-button>
          </div>
        </van-form>
      </div>
      <div class="personList" v-if="personListShow1">
        <dl class="personItem" v-for="(item, index) in filterData" :key="index">
          <dd>
            <em v-if="index == 0">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                plain>集团授权人</van-tag></em>
            <em v-if="index == 1">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                plain>集团授权人</van-tag></em>
            <em v-if="index == 2">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                plain>集团成员</van-tag></em>
            <em v-if="index == 3">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                plain>集团成员</van-tag></em>

            <em>工号：{{ item.no }}</em>
            <em>手机号：{{ item.phone }}</em>
            <em>有效期：{{ item.validityPeriod }}</em>
          </dd>
          <dt>
            <van-button @click="updateStatus(item)" v-if="item.status == 0" size="small" type="info">去鉴权</van-button>
            <span class="status">{{ item.status == 0 ? "未鉴权" : "已鉴权" }}</span>
          </dt>
        </dl>
      </div>
      <div class="personList" v-if="personListShow2">
        <span v-for="(item, index) in filterData" :key="index">
          <dl class="personItem" v-if="index != 0 && index != 1">
            <dd>
              <em v-if="index == 0">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                  plain>集团法人</van-tag></em>
              <em v-if="index == 1">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                  plain>集团授权人</van-tag></em>
              <em v-if="index == 2">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                  plain>集团成员</van-tag></em>
              <em v-if="index == 3">{{ item.name }}<van-tag style="margin-left: .1rem;" type="primary"
                  plain>集团成员</van-tag></em>
              <em>工号：{{ item.no }}</em>
              <em>手机号：{{ item.phone }}</em>
              <em>有效期：{{ item.validityPeriod }}</em>
            </dd>
            <dt v-if="index == 2 || index == 3">
              <van-button @click="updateStatus(item)" size="small" type="info">去鉴权</van-button>
              <span class="status">未鉴权</span>
            </dt>
          </dl>
        </span>
      </div>
      <div class="personList" v-if="personListShow3">
        <dl class="personItem">
          <dd>
            <em>李静静<van-tag style="margin-left: .1rem;" type="primary" plain>集团成员</van-tag></em>
            <em>工号：10200304</em>
            <em>手机号：17601069732</em>
            <em>有效期：2021.3.1-2042.3.1</em>
          </dd>
          <dt>

          </dt>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'OnlineAuth',
  data() {
    return {
      count:0,
      personListShow1: true,
      personListShow2: false,
      personListShow3: false,
      formModel: {},
      dataList: [{
        name: '戴永名',
        no: '10200304',
        validityPeriod: '2021.3.1-2042.3.1',
        phone: '17601069732',
        status: 0, /* 0: 待鉴权 1：鉴权成功 */
      },{
        name: '李晓浩',
        no: '10200305',
        validityPeriod: '2021.3.1-2042.3.1',
        phone: '15803217937',
        status: 0, /* 0: 待鉴权 1：鉴权成功 */
      },{
        name: '张桂芳',
        no: '10200306',
        validityPeriod: '2021.3.1-2042.3.1',
        phone: '18401062873',
        status: 1, /* 0: 待鉴权 1：鉴权成功 */
      },{
        name: '李想',
        no: '10200307',
        validityPeriod: '2021.3.1-2042.3.1',
        phone: '13800927873',
        status: 1, /* 0: 待鉴权 1：鉴权成功 */
      }],
      filterData: [],
    }
  },
  mounted() {
    this.filterData = this.filteredList();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
      this.count = 0
    },
    filteredList() {
      if (this.formModel.name) {
        return this.dataList.filter(item => item.name.toLowerCase().includes(this.formModel.name.toLowerCase()));
      } else if (this.formModel.no) {
        return this.dataList.filter(item => item.no == this.formModel.no);
      } else {
        return this.dataList;
      }
    },
    resetForm() {
      this.formModel = {};
      this.filterData = this.dataList;
    },
    searchQuery() {
      this.filterData = this.filteredList();
    },
    updateStatus(item) {
      this.$toast.success('鉴权成功');
      item.status = 1;
    },
    mnClickDiv() {
      this.count = this.count + 1
      if (this.count == 1) {
        this.personListShow1 = false
        this.personListShow2 = true
        this.personListShow3 = false
      } else if (this.count == 2) {
        this.personListShow1 = false
        this.personListShow2 = false
        this.personListShow3 = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.onlineAuth {
  position: relative;
  overflow: auto;
}
.mnClickDiv{
    position: absolute;
      top: 0;
      left: 2.8rem;
      z-index: 2;
      width: 2rem;
      height: .9rem;
}
.content {
  position: absolute;
  top: .98rem;
  padding-left: .2rem;
  .formQuery {
    width: 7.1rem;
    height: 6rem;
    background: #FFFFFF;
    border-radius: 0.3rem;
    .van-form {
      padding-top: .3rem;
      .btns {
        display: flex;
        justify-content: space-between;
        button {
          width: 3.14rem;
          height: .72rem;
          border-radius: 0.2rem;
          font-size: 0.32rem;
          &:first-child {
            background: #E9F4FF;
            color: #2892FF;
            border: 0 !important;
          }
        }
      }
    }
  }
  .personList {
    margin: .2rem 0;
    .personItem {
      width: 7.1rem;
      background: #FFFFFF;
      border-radius: 0.3rem;
      margin-top: .2rem;
      padding: .3rem;
      display: flex;
      justify-content: space-between;
      dd {
        height: 100%;
        display: flex;
        flex-direction: column;
        em {
          font-style: normal;
          color: #666666;
          font-size: 0.26rem;
          margin-bottom: .12rem;
          &:first-child {
            font-size: 0.32rem;
            color: #333333;
            display: flex;
            align-items: center;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      dt {
        position: relative;
        &>span {
          color: #666666;
          font-size: 0.26rem;
        }
        .status {
          position: absolute;
          top: 0;
          right: 0;
          display: block;
          width: 1.2rem;
          text-align: right;
        }
      }
    }
  }
}
</style>
